import React, { useEffect, useState, useRef } from 'react';
import { Tree, Card, Dropdown, Button } from 'antd';
import { connect } from 'umi';
import { categoryType_status } from '@/common/contact'
import FromSet from './components/SetForm';
import TableDataBlock from '@/components/TableDataBlock';
import './index.less';
const management = (props) => {
  const { dispatch, loading } = props;
  const tabList = (() => {
    return Object.keys(categoryType_status).map(item => {
      return {
        tab: categoryType_status[item],
        key: item
      }
    })
  })()
  const [visible, setVisible] = useState(false);
  const [list, setList] = useState([]);
  const [activeTabKey, setActiveTabKey] = useState(tabList[0].key);
  useEffect(() => {
    fetchData();
  }, [activeTabKey]);
  const onTabChange = (key) => {
    setActiveTabKey(key);
  };
  const findParentIds = (data, childId, result = []) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      if (item.id === childId) {
        result.push(item.id);
        if (item.parentId) {
          findParentIds(data, item.parentId, result);
        }
        break;
      } else if (item.subMaterialCategoryList) {
        findParentIds(item.subMaterialCategoryList, childId, result);
        if (result.length > 0 && item.id) {
          result.push(item.id);
          break;
        }
      }
    }
    return result;
  };
  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchListMaterialCategory',
      payload: {
        categoryType: activeTabKey
      },
      callback: (e) => {
        setList(filterList(e));
      },
    });
  };
  const filterList = (list) => {
    return list.map((item) => {
      const { subMaterialCategoryList: children } = item;
      const localItem = {
        ...item,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const getColumns = [
    {
      title: '分类名称',
      dataIndex: 'categoryName',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          type: 'edit',
          click: () => {
            setVisible({
              show: true,
              detail: {
                ...record,
                parentId: findParentIds(list, val).reverse(),
                categoryType: activeTabKey
              },
            });
          },
        },
        {
          type: 'del',
          click: () => {
            dispatch({
              type: 'liveStreaming/fakeDeleteMaterialCategory',
              payload: { id: val },
              callback: (e) => {
                fetchData();
              },
            });
          },
        },
      ],
    },
  ];
  return (
    <Card
      title="媒体目录"
      tabList={tabList}
      activeTabKey={activeTabKey}
      onTabChange={onTabChange}
      extra={
        <Button
          onClick={() => {
            setVisible({ show: true });
          }}
          type="link"
        >
          新增
        </Button>
      }
    >
      <FromSet
        activeTabKey={activeTabKey}
        reload={() => fetchData()}
        visible={visible}
        onClose={() => setVisible(false)}
      ></FromSet>
      <TableDataBlock
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        list={list}
      ></TableDataBlock>
    </Card>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.redBooklet,
}))(management);
